<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>首选项</h1>
        <div>
            <label>PSD宽度</label>
            <input type="text" v-model.number='psdWidth'>
            <label>PSD高度</label>
            <input type="text" v-model.number='psdHeight'>
        </div>
        <div>
            <div>
                <label>宽度</label>
                <input type="text" v-model.number='width'>px
                <p>结果：
                    <p>{{resultWidth}}vw</p>
            </div>
            <div>
                <label>高度</label>
                <input type="text" v-model.number='height'>px
                <p>结果：{{resultHeight}}vh</p>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                psdWidth: '1366',
                psdHeight: '768',
                width: '0',
                height: '0'
            },
            computed: {
                resultWidth:function() {
					return parseFloat(this.width)/this.psdWidth * 100;	
                },
                resultHeight:function() {
					return parseFloat(this.height)/this.psdHeight * 100;	
                }
            }
        })
        console.log(vm.$data)
    </script>
</body>

</html>
